<template>
  <div class="carerr_container">
    <!-- 修改个人密码弹出层 -->
    <van-popup v-model="mimashow" :style="{width:'100%',height:'50%'}" position="bottom">
      <!-- 修改个人头像内容 -->
      <!-- 输入任意文本 -->
        <van-field v-model="text" label="请输入旧密码" class="mima" :style="{width:'100%',height:'12vw'}" />
        <van-field v-model="text1" label="请输入新密码" class="mima" :style="{width:'100%',height:'12vw'}" />
        <!-- 输入手机号，调起手机号键盘 -->
        <van-field v-model="text2"  label="请确定新密码" class="mima" :style="{width:'100%',height:'12vw'}"/>
        <button @click="surechangge" id="surechanggebtn">确定更改</button>
    </van-popup>
    <!-- 修改个人真实姓名弹出层 -->
    <van-popup v-model="truenameshow" :style="{width:'100%',height:'50%'}" position="bottom">
      <!-- 修改个人头像内容 -->
      <!-- 输入任意文本 -->
        <!-- 输入手机号，调起手机号键盘 -->
        <van-field v-model="truename1"  label="请输入真实姓名" class="mima" :style="{width:'100%',height:'12vw'}"/>
        <van-field v-model="email"  label="请输入邮箱" class="mima" :style="{width:'100%',height:'12vw'}"/>
        <button @click="surechanggename" id="surechanggebtn">确定更改</button>
    </van-popup>

    <!-- 弹出层  切换联赛 -->
    <van-popup
     v-model="show1"
      position="right"
      :overlay="true"
      closeable
      close-icon-position="top-left"
      :style="{width:'100%',height:'100%'}"
    >
      <!-- 切换联赛组件 -->
      <SwitchLeague></SwitchLeague>
    </van-popup>
    <!-- nav导航栏 -->
    <div class="nav--container">
      <van-nav-bar
        title="个人中心"
        @click-left="onClickLeft"
      >
        <template #left>
          <van-icon name="exchange" size="18" color="white" @click="showPopup1"/>
        </template>
      </van-nav-bar>
    </div>

    <!-- 我的信息 -->
        <!-- 修改个人头像弹出层 -->
    <van-popup v-model="txshow" :style="{width:'100%'}" position="bottom">
      <!-- 修改个人头像内容 -->
      <van-cell-group>
        <van-uploader :after-read="afterRead" class="qqq">
            <button :style="{width:'100%',height:'12vw'}" class="changgename">打开相册</button>
        </van-uploader>
        <van-uploader capture="camera" :after-read="afterRead1" class="qqq">
            <button :style="{width:'100%',height:'12vw'}" class="changgename">打开照相机</button>
        </van-uploader>
      </van-cell-group>
    </van-popup>
    <!-- 我的信息弹出层 -->
    <van-popup v-model="show" :style="{ height: '100%' ,width:'100%'}">
      <!-- 内容部分 -->
      <!-- 导航栏 -->
        <van-nav-bar
          title="个人中心"
          left-text="返回"
          left-arrow
          @click-left="show = !show"
        />
        <van-cell-group>

          <van-cell title="头像"  class="cell-group1 " @click="txshow1">
            <template>
              <!-- 个人头像 -->
              <van-image
                round
                width="12vw"
                height="12vw"
                :src="this.personal_Info.user_pic"
                :style="{margin:'0 8vw 0 0 '}"
              />
            </template>
          </van-cell>
          <van-cell title="用户名" :value="this.personal_Info.username" class="cell-group1" >
            <input type="text" :value="this.personal_Info.username" class="cell-group1_input">
          </van-cell>
          <van-cell title="真实姓名" :value="this.personal_Info.nickname" class="cell-group1" @click="truenameshow1">
            <input type="text" :value="this.personal_Info.nickname" class="cell-group1_input">

          </van-cell>
          <van-cell title="更换密码" value="******" class="cell-group1" @click="mimashow1"/>
        </van-cell-group>
    </van-popup>

    <div class="my-container">
      <div class="my-container-top" @click="showPopup">

        <div class="my-container-topLeft" >
          <!-- 个人头像 -->
          <van-image
            round
            width="15vw"
            height="15vw"
            :src="this.personal_Info.user_pic"
          />
        </div>
        <!-- 个人名称 -->
        <div class="my-container-topCenter">
          <p>{{ this.personal_Info.nickname }}</p>
        </div>
        <!-- 修改个人信息 -->
        <div class="my-container-topRight">
          <van-icon name="edit" color="grey"/>

        </div>
      </div>
      <div class="my-container-Btm">
        <div class="my-container-BtmLeft">
          <p>我的机构</p>
        </div>
        <div class="my-container-BtmRight">
          <p>管理</p>
        </div>
      </div>
    </div>

    <!-- chuang联赛弹出层 -->
    <van-popup
      v-model="CreateLeague_show"
      closeable
      position="right"
      close-icon-position="top-left"
      :style="{ height: '100%' ,width:'100%'}">
      <CreateLeague></CreateLeague>
    </van-popup>
    <!-- 账户安全 -->
      <div class="account-container">
        <van-cell title="账户与安全" icon="lock" class="account-cell" @click="$toast('该功能还未开发')">
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #right-icon>
            <van-icon name="arrow" class="search-icon" />
          </template>
        </van-cell>
        <van-cell title="意见反馈" icon="comment" class="account-cell" @click="$toast('该功能还未开发')">
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #right-icon>
            <van-icon name="arrow" class="search-icon" />
          </template>
        </van-cell>
        <van-cell title="创建联赛" icon="add" class="account-cell" @click="CreateLeague_showPopup">
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #right-icon>
            <van-icon name="arrow" class="search-icon" />
          </template>
        </van-cell>
        <van-cell title="联系客服" icon="service" class="account-cell" @click="$toast('该功能还未开发')">
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #right-icon>
            <van-icon name="arrow" class="search-icon" />
          </template>
        </van-cell>
      </div>

    <!-- 切换联赛 -->
    <div class="switch-container">
      <div class="switch-container-Top" @click="showPopup1">
        <p>切换联赛</p>
      </div>
      <div class="switch-container-Btm">
        <p @click="loginShow = !loginShow">退出登录</p>
      </div>
    </div>
    <!-- 退出登录弹出层 -->
    <van-popup v-model="loginShow" closeable :style="{width:'100%',height:'100%'}">
      <login></login>

    </van-popup>

    <!-- 温馨提示 -->
    <div class="reminder">
      <p>赛事助手 v1.10.0</p>
      <p>《隐私条款》 《服务条款》</p>
    </div>
  </div>
</template>

<script>
import login from '@/components/login/login.vue'
import CreateLeague from '@/components/Create_League/Create_League.vue'
import SwitchLeague from '@/components/Switch_League/Switch_League.vue'
import { mapState } from 'vuex'
import { ModifyAvatar, UpdatePassword, userinfo } from '@/api/user'

export default {
  name: 'view_carerr',
  data () {
    return {
      CreateLeague_show: false,
      show: false,
      show1: false,
      personal_Info: '',
      loginShow: false,
      txshow: false,
      mimashow: false,
      text: '',
      text1: '',
      text2: '',
      truenameshow: false,
      truename1: '',
      email: ''
    }
  },
  computed: {
    ...mapState(['personal_Information'])
  },
  components: {
    login,
    CreateLeague,
    SwitchLeague
  },
  mounted() {
    this.submit()
  },
  methods: {
    surechanggename() { // 修改个人信息功能(姓名、邮箱)
      const token = window.localStorage.getItem('token')// 携带本地的token
      const id = JSON.parse(window.localStorage.getItem('user_info')).id// 携带本地的用户id
      // 二次封装的axios请求
      userinfo(token, id, this.truename1, this.email).then(res => {
        if (res.message === '更新用户基本信息成功！') {
          this.$toast('修改基本信息成功')
          this.personal_Info = res.data // 页面及时更新用户信息
          window.localStorage.setItem('user_info', JSON.stringify(res.data))
          window.localStorage.setItem('user', JSON.stringify(res.data.username))
          this.truenameshow = !this.truenameshow // 关闭弹出层
        }
      })
    },
    truenameshow1() {
      this.truenameshow = !this.truenameshow
    },
    txshow1() {
      this.txshow = true
      console.log('asdasd')
    },
    surechangge() { // 修改用户密码
      if (this.text1 === this.text2) { // 判断两次新密码是否一致
        const token = window.localStorage.getItem('token') // 携带本地的token
        UpdatePassword(token, this.text, this.text2) // 二次封装的axios请求
          .then(res => {
            this.mimashow = !this.mimashow
            this.$toast('密码修改成功')
          })
      } else {
        this.$toast('两次密码输入不一致')
      }
    },
    mimashow1() {
      this.mimashow = !this.mimashow
    },
    afterRead(file) { // 修改用户头像（打开相册）
      const token = window.localStorage.getItem('token')// 携带本地的token
      ModifyAvatar(token, file.content)// 二次封装的axios请求
        .then(res => {
          this.personal_Info = res.data
          window.localStorage.setItem('user_info', JSON.stringify(res.data))
          window.localStorage.setItem('user', JSON.stringify(res.data.username))
        })
    },
    afterRead1(file) { // 修改用户头像（打开摄像头）
      const token = window.localStorage.getItem('token')// 携带本地的token
      ModifyAvatar(token, file.content)// 二次封装的axios请求
        .then(res => {
          this.personal_Info = res.data
          window.localStorage.setItem('user_info', JSON.stringify(res.data))
          window.localStorage.setItem('user', JSON.stringify(res.data.username))
        })
    },
    submit() {
      this.personal_Info = JSON.parse(window.localStorage.getItem('user_info'))
      // console.log(this.personal_Info)
    },
    onClickLeft () {
      this.$toast('返回')
    },
    showPopup () {
      this.show = true
    },
    showPopup1 () {
      this.show1 = true
    },
    CreateLeague_showPopup () {
      this.CreateLeague_show = true
    }
  }

}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
.cell-group1_input{
  position: absolute;
  left: 80vw;
  border: none;
}
.qqq{
  width: 100%;
}
 :v-deep .qqq .van-uploader__input-wrapper
  .search-icon {
    font-size: 16px;
    line-height: inherit;
  }
  .van-nav-bar .van-icon{
    color: white;
  }

.carerr_container{
  position: relative;
}
.nav--container{
  background-color: black;
  width: 100%;
  height: 33vw;
}
.van-nav-bar{
  background-color: black;

}
#surechanggebtn{
  width: 100%;
  height: 12vw;
  line-height: 12vw;
  background-color: orangered;
  color: white;

}
.changgename{
  width: 100%;
  text-align: center;
  left: 0;
}
::v-deep .van-uploader__input-wrapper
::v-deep .van-ellipsis{
  color: rgb(255, 255, 255);
}
.search-icon {
  font-size: 16px;
  line-height: inherit;
}
.my-container{
  box-sizing: border-box;
  /* border: 2px solid red; */
  position: absolute;
  background-color: white;
  width: 90%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 2vw;
}
.account-container{
  position: absolute;
  top: 33vw;
  width: 100%;
  box-sizing: border-box;
  /* border: 2px solid red; */
  margin-top: 18vw;
}
.my-container-top{
  position: relative;

  width: 100%;
  height: 60%;
  /* background-color: antiquewhite; */
}
.my-container-top div{
  float: left;
  /* background-color: aqua; */
  /* height: 100%; */
}
.my-container-Btm{
  position: relative;
  width: 100%;
  height: 40%;
  /* background-color: rgb(128, 128, 128); */
}
.my-container-topLeft{
  position: absolute;
  left: 15%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.my-container-topCenter{
  position: absolute;
  left: 35%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.my-container-topRight{
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.my-container-Btm div{
  float: left;
}
.my-container-BtmLeft{
  position: absolute;
  left: 15%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.my-container-BtmRight{
  position: absolute;
  right: 0%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.account-cell{
  position: relative;
  width: 100%;
  height: 12vw;
  line-height: 12vw;
}
.van-cell__left-icon{
  position: absolute;
  left: 2%;
  top: 50%;
  transform: translateY(-50%);
}
.van-cell__title{
  position: absolute;
  left: 10%;
}
.van-icon-arrow{
  position: absolute;
  right: 10%;
}
.switch-container{
  position: absolute;
  width: 100%;
  background-color: azure;
  top: 101vw;
  text-align: center;
}
.switch-container div{
  height: 13vw;
  line-height: 13vw;
}
.switch-container div:first-child{
  border-bottom: 2px solid rgb(168, 168, 168);
}
.reminder{
  position: absolute;
  top: 130vw;
  text-align: center;
  width: 100%;
  font-size: 1vw;
  line-height: 5vw;
}
.reminder p:nth-child(2){
  color: rgb(252, 119, 10);
}
.cell-group1{
  width: 100%;
  height: 12vw;
  line-height: 12vw;
}
.cell-group1 span{
  margin-right: 10vw;
}
.mima{
  width: 100%;
  height: 12vw;
  border-bottom: 1px solid gray;
}
 :v-deep .van-nav-bar__title{
    color: white;
  }
  ::v-deep .van-uploader__input-wrapper{
    width: 100%;
  }
  ::v-deep .van-nav-bar__title{
    color: white !important;
  }
</style>
